import React, { PureComponent, ReactNode } from 'react'
import { Tab, Button, ResponsiveGrid} from '@alifd/next';
import PageHeader from '@/components/PageHeader';
import CouponCodeList from './CouponCodeList';
import CouponList from './CouponList';
const { Cell } = ResponsiveGrid;
interface Props {}
interface State {
  tabKey: string,
}

class Index extends PureComponent<Props, State> {
  constructor(props: Props) {
    super(props)

    this.state = {
      tabKey: '1',
    }
  }
  tabs = [
    {
      key: '1',
      title: '优惠卷',
    },
    {
      key: '2',
      title: '优惠码',
    },
  ]
  changeTab = (val) => {
    this.setState({
      tabKey: val,
    });
  }
  createClick = () => {
    // history.push('/promotion/addCoupon');
  }
  render(): ReactNode {
    return (
      <ResponsiveGrid gap={20}>
      <Cell colSpan={12}>
        <PageHeader
          breadcrumbs={[
            { name: '促销管理' },
            { name: '优惠卷' },
            { name: '优惠码' },
          ]}
        />
      </Cell>

      <Cell colSpan={12}>
        <Button type="primary" onClick={this.createClick} size="medium">创建</Button>
        <Button style = {{ marginLeft: '15px'}} type="primary" size="medium">定时发放失败列表</Button>
        <Tab>
          {this.tabs.map((item) =>
            <Tab.Item title={item.title} key={item.key} onClick={this.changeTab}></Tab.Item>
          )}
        </Tab>
        {this.state.tabKey === '1' ? <CouponList /> : <CouponCodeList />}
      </Cell>
    </ResponsiveGrid>
    )
  }
}

export default Index
